<template>
  <div class="wrapper">
    <CityHeader></CityHeader>
    <CityList :citys=provincesChars :letter=letter></CityList>
    <CityAlphabet 
      :keys=provincesChars.keys
      @change="handleLetterChange"
      ></CityAlphabet>
  </div>
</template>
<script>
import CityHeader from '@/components/city/Header'
import CityList from '@/components/city/components/List'
import CityAlphabet from '@/components/city/components/alphabet'
import axios from 'axios'
// import py from 'vue-py'
// 引入拼音模块
import pinyin from 'pinyin'
import Vue from 'vue'
import pinyinlite from 'pinyinlite'
import 'pinyin4js'
export default {
  name: 'City',
  data () {
    return {
      citys: [],
      provincesChars: {
        keys: [],
        citys: {}
      },
      letter: ''
    }
  },
  components: {
    CityHeader,
    CityList,
    CityAlphabet
  },
  methods: {
    handleLetterChange (letter) {
      console.log(letter)
      
      this.letter = letter
    },
    success (res) {
      // console.log(res);
      let resData = res.data
      resData.forEach(element => {
        if(!element.city) return
        element.city.forEach(ele => {
          let itemFirst = PinyinHelper.getShortPinyin(ele.name)[0].toUpperCase()
          // hasOwnProperty
          if(this.provincesChars.citys.hasOwnProperty(itemFirst)){
            this.provincesChars.citys[itemFirst].push(ele.name)
          }else{
            this.provincesChars.citys[itemFirst] = [ele.name]
          }
          
          this.provincesChars.keys.push(itemFirst)
        })
      })
      this.provincesChars.keys = [...new Set(this.provincesChars.keys)]
      this.provincesChars.keys.sort()
      console.log(this.provincesChars.citys)
      

    },
    errors (err) {
      console.log(err);
    },
    getCitys () {
      let urlString = 'http://192.168.0.59:8080/api/v2/citys'
      axios.get(urlString).then(this.success).catch(this.errors)
    },
    getCitys2 () {
      axios.get('/api/city2.json').then(data => {
        // 获取json中 data属性值 已经转换过
        let res = data.data;
        // console.log(pinyin('漳'))
        console.log(PinyinHelper.getShortPinyin('漳'))
        res.forEach(element => {
          if (element.city) {
            element.city.forEach(item => {
              item.area.forEach(cityname => {
                // console.log(cityname,pinyin(cityname,{
                //   style: pinyin.STYLE_FIRST_LETTER
                // })[0]);
                console.log(cityname,PinyinHelper.getShortPinyin(cityname)[0].toUpperCase());
              });
            });
          }
        });


        
        // 将汉字转拼音
        console.log(pinyin('北京'));
        // 将第一个汉字首字母的第一个字母转成大写
        console.log(pinyin('北京')[0][0].charAt(0).toUpperCase());
        let provinces = [];
        res.forEach(element => {
          provinces.push(element.name);
        });
        // 带韵母 正统的拼音
        let provinceFirstChars = [];
        provinces.forEach(element => {
          let firstChar = pinyin(element)[0][0].charAt(0);
          provinceFirstChars.push(firstChar.toUpperCase());
        });
        console.log(provinceFirstChars);
        // 设置 转换模式 得到普通的 拼音也就是不带韵母
        let provinceFirstChars2 = [];
        provinces.forEach(element => {
          let firstChar = pinyin(element,{
            // 普通风格，即不带声调
            style: pinyin.STYLE_NORMAL
          })[0][0].charAt(0);
          provinceFirstChars2.push(firstChar.toUpperCase());
        });
        console.log(provinceFirstChars2);
        // 数组去重
        let lastArray = [...new Set(provinceFirstChars2)];
        // 数组按字母排序 pinyin 自带了 排序算法
        let sortArray = lastArray.sort(pinyin.compare);
        console.log(sortArray);
        this.citys = res;
        this.provincesChars = sortArray;
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.getCitys()
  }
}
</script>
<style lang="stylus" scoped>

</style>
